<template>
  <div class="user">
    <!-- 搜索框 -->
    <div class="search">
      <el-row>
        <el-form
          label-width="70px"
          :model="formData"
          :rules="rules"
          ref="form"
          @submit.prevent
        >
          <el-row>
            <el-form-item label="关键字">
              <el-radio-group v-model="radioLabel">
                <el-radio label="用户ID"></el-radio>
                <el-radio label="姓名"></el-radio>
                <el-radio label="身份证"></el-radio>
                <el-radio label="电话"></el-radio>
                <el-radio label="邮箱"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-row>
          <el-row>
            <el-col :span="15">
              <el-form-item :label="radioLabel">
                <el-input v-model="keyWord" @keyup.enter="search"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-button id="search" @click="search">搜&nbsp;索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
    </div>
    <div>
      <!-- 列表 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        height="250"
        row-key="userId"
        lazy
      >
        <el-table-column label="用户ID" width="100">
          <template #default="scope">
            <span>{{ scope.row.userId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="姓名" width="100">
          <template #default="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="身份证" width="180">
          <template #default="scope">
            <span>{{ scope.row.ID }}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系电话" width="150">
          <template #default="scope">
            <span>{{ scope.row.phoneNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column label="会员" width="60">
          <template #default="scope">
            <span style="margin-left:8px">{{
              scope.row.vip === true ? '是' : '否'
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="邮箱" width="180">
          <template #default="scope">
            <span>{{ scope.row.email }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <div style="margin-left:-10px">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 填写信息框 -->
      <el-dialog title="用户信息" v-model="showDialog">
        <el-form :model="formData">
          <el-row>
            <el-form-item id="radio">
              <el-radio-group v-model="formData.vip">
                <el-radio :label="true">会员</el-radio>
                <el-radio :label="false">非会员</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="用户ID">
              <el-input v-model="formData.userId" autocomplete="off"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="姓名">
              <el-input v-model="formData.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="身份证">
              <el-input v-model="formData.ID" autocomplete="off"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="联系电话">
              <el-input
                v-model="formData.phoneNumber"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="邮箱">
              <el-input v-model="formData.email" autocomplete="off"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item id="btn">
              <el-button @click="cancelForm">取 消</el-button>
              <el-button type="primary" @click="confirmForm(formData.index)">
                确 定
              </el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { defineComponent, getCurrentInstance, ref } from 'vue';

export default defineComponent({
  name: 'User',
  components: {},
  setup(propst) {
    const radioLabel = ref('用户ID');
    const keyWord = ref('');
    const search = () => {
      if (keyWord.value === '') {
        tableData.value = originData.value;
        return;
      }
      tableData.value = originData.value.filter((currentValue) => {
        let label;
        switch (radioLabel.value) {
          case '用户ID':
            label = 'userId';
            break;
          case '姓名':
            label = 'name';
            break;
          case '身份证':
            label = 'ID';
            break;
          case '电话':
            label = 'phoneNumber';
            break;
          case '邮箱':
            label = 'email';
            break;
          default:
            label = '';
        }
        return currentValue[label].match(keyWord.value);
      });
    };
    const originData = ref([
      {
        userId: '0001',
        name: 'Alan',
        ID: '123456',
        phoneNumber: '18888888888',
        vip: true,
        email: '111@qq.com',
        registerTime: '2020-05-20',
      },
      {
        userId: '0001',
        name: 'Alan',
        ID: '123456',
        phoneNumber: '18888888888',
        vip: false,
        email: '111@qq.com',
        registerTime: '2020-05-20',
      },
      {
        userId: '0001',
        name: 'Alan',
        ID: '123456',
        phoneNumber: '18888888888',
        vip: false,
        email: '111@qq.com',
        registerTime: '2020-05-20',
      },
      {
        userId: '0001',
        name: 'Alan',
        ID: '123456',
        phoneNumber: '18888888888',
        vip: false,
        email: '111@qq.com',
        registerTime: '2020-05-20',
      },
    ]);
    const tableData = ref(originData.value);
    const formData = ref({
      index: '',
      userId: '',
      name: '',
      ID: '',
      phoneNumber: '',
      vip: false,
      email: '',
      registerTime: '',
    });
    // const tableItem = ref();
    // const dialogTitle = ref();
    const showDialog = ref(false);
    const { ctx } = getCurrentInstance();
    const handleEdit = (index, row) => {
      Object.keys(formData.value).forEach((key) => {
        formData.value[key] = tableData.value[index][key];
      });
      // formData.value = tableData.value[index];
      formData.value.index = index;
      showDialog.value = true;
      // ctx
      //   .$confirm(
      //     '检测到未保存的内容，是否在离开页面前保存修改？',
      //     '确认信息',
      //     {
      //       distinguishCancelAndClose: true,
      //       confirmButtonText: '保存',
      //       cancelButtonText: '取消',
      //     }
      //   )
      //   .then(() => {
      //     this.$message({
      //       type: 'info',
      //       message: '保存修改',
      //     });
      //   })
      //   .catch((action) => {
      //     this.$message({
      //       type: 'info',
      //       message:
      //         action === 'cancel' ? '放弃保存并离开页面' : '停留在当前页面',
      //     });
      //   });
    };
    const handleDelete = (index, row) => {
      //向后端数据传输接口
      tableData.value.splice(index, 1);
    };
    const confirmForm = (index) => {
      console.log('index: ', index);
      showDialog.value = false;
      Object.keys(tableData.value[index]).forEach((key) => {
        tableData.value[index][key] = formData.value[key];
        //向后端数据传输接口
      });
    };
    const cancelForm = () => {
      showDialog.value = false;
    };

    return {
      radioLabel,
      keyWord,
      search,
      originData,
      tableData,
      formData,
      handleEdit,
      handleDelete,
      showDialog,
      // addItem,
      // editRow,
      // closeDialog,
      confirmForm,
      cancelForm,
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/assets/css/config.scss';

.el-row {
  margin-left: 5px;
}
//多选框

:deep(.el-table) {
  border-radius: 20px;
  padding: 10px;
  height: 469px !important;
}
.search {
  border-radius: 20px;
  padding: 10px;
  background-color: #fff;
  /* width: 500px; */
  height: 110px;
  /* margin: 0 auto; */
  margin-bottom: 20px;
  #search {
    width: 85px;
  }
}
:deep(.el-input__inner) {
  width: 300px;
}
:deep(.el-dialog) {
  margin-top: 40px !important;
  text-align: center;
  width: 500px !important;
  .el-input__inner {
    width: 400px;
  }
  .el-form {
    // margin-left: -10px;
    .el-row {
      // margin: 20px auto;
      .el-form-item {
        margin: 0 auto;
        &#radio {
          padding-left: 5px;
        }
        &#btn {
          margin-top: 40px;
          // margin-left: -10px;
          .el-button {
            margin: 0 40px;
            width: 140px;
          }
        }
      }
    }
  }
}
</style>
